<template>
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-time"></i>案件状态</template>
                    <el-menu-item-group>
                        <template slot="title" >进行中</template>
                        <el-menu-item index="1-1" v-for='item in leftItem1' :key='item.caseId' @click='queryByName(item)'>{{item.caseName}}</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group>
                        <template slot="title">已完结</template>
                        <el-menu-item index="1-2" v-for='item in leftItem2' :key='item.caseId' @click='queryByName(item)'>{{item.caseName}}</el-menu-item>
                    </el-menu-item-group>

                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-s-custom"></i>律师</template>
                    <el-menu-item-group>
                        <template slot="title">律师名称</template>
                        <el-menu-item index="2-1" v-for='item in lawyerNames' :key='item.caseId' @click='queryByName(item)'>{{item.lawyerName}}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>

<!--        v-model="value2"-->

        <el-container>
            <el-header style="text-align: right; font-size: 12px" >
                <el-dropdown>
                    <el-date-picker style='width: 150px;margin-right: 30px'
                        type="month"
                        placeholder="选择月"  v-model="query.dateMonth"
                    value-format='yyyy-MM'>
                    </el-date-picker>

                        <el-button type="primary" icon="el-icon-search" @click="handleSearch" >搜索</el-button>
                        <el-button type="primary" icon="el-icon-plus" @click="addCase" style='margin-right: 600px'>录入案件</el-button>

                </el-dropdown>
                <span>案件详情</span>
            </el-header>

            <el-main>
                <el-table :data="tableData">
                    <el-table-column prop="year" label="年份" width="80">
                    </el-table-column>
                    <el-table-column prop="contractNumber" label="案件编号" width="80">
                    </el-table-column>
                    <el-table-column prop="caseName" label="案件名称">
                    </el-table-column>
                    <el-table-column prop="caseType" label="案件类型">
                    </el-table-column>
                    <el-table-column prop="representationType" label="代理类型">
                    </el-table-column>
                    <el-table-column prop="court" label="开庭法院" width='150'>
                    </el-table-column>
                    <el-table-column prop="courtDate" label="开庭年月">
                    </el-table-column>
                    <el-table-column prop="status" label="状态">
                    </el-table-column>
                    <el-table-column prop="result" label="结果">
                    </el-table-column>
                </el-table>
            </el-main>



            <!--    录入弹出框-->
            <el-dialog title="录入新案件" :visible.sync="addVisible" width="30%">
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-form-item label="案件编号" prop='caseId'>
                        <el-input v-model="form.caseId"></el-input>
                    </el-form-item>
                    <el-form-item label="案件名称" prop='caseName'>
                        <el-input v-model="form.caseName"></el-input>
                    </el-form-item>
                    <el-form-item label="案件类型 " prop='caseType'>
                        <el-select v-model="form.caseType">
                            <el-option key="0" label="请选择" value=""></el-option>
                            <el-option key="1" label="刑事案件" value="刑事案件"></el-option>
                            <el-option key="2" label="民事案件" value="民事案件"></el-option>
                            <el-option key="3" label="行政案件" value="行政案件"></el-option>
                            <el-option key="4" label="经济案件" value="经济案件"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="代理类型 " prop='representationType'>
                        <el-select v-model="form.representationType"  placeholder="请选择">
                            <el-option key="1" label="原告" value="原告"></el-option>
                            <el-option key="2" label="被告" value="被告"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开庭法院" prop='court'>
                        <el-input v-model="form.court"></el-input>
                    </el-form-item>
                    <el-form-item label="律师名称" prop='court'>
                        <el-input v-model="form.lawyerName"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" >
                        <el-select v-model="form.status"  placeholder="请选择">
                            <el-option key="1" label="进行中" value="进行中"></el-option>
                            <el-option key="2" label="已结案" value="已结案"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开庭年月" prop='courtDate'>
                        <el-date-picker
                            v-model="form.courtDate"
                            value-format='yyyy-MM-dd'
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item v-model='form.result' label="结果" prop='result'>
                        <el-select v-model="form.result"  placeholder="请选择">
                        <el-option key="1" label="胜诉" value="胜诉"></el-option>
                        <el-option key="2" label="败诉" value="败诉"></el-option>
                        <el-option key="3" label="调节" value="调节"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
            </el-dialog>




        </el-container>
    </el-container>


</template>

<script>
import { getCaseWhereStatus1 } from '../../api/case';
import { getCaseWhereStatus2 } from '../../api/case';
import { getLawyers } from '../../api/case';
import { selectCaseByConditon } from '../../api/case';
import { addCases } from '../../api/case';


export default {
    name: 'lawyerContract',
    data() {
        const item = {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        };
        return {

            form:{},
            query:{
                dateMonth:"",
                lawyerName:"",
                caseName:""
            },
            leftItem1:[],
            leftItem2:[],
            lawyerNames:[],
            tableData:{},
            addVisible:false,
            rules:{
                caseName: [
                    { required: true, message: '案件名称不能为空', trigger: 'blur' }
                ],
                caseType: [
                    { required: true, message: '请选择合同类型', trigger: 'change' }
                ],
                representationType: [
                    { required: true, message: '请选择代理类型', trigger: 'change' }
                ],

            },

        }
    },
    created() {
        this.getData();
    },
    methods:{
        // 保存编辑
        saveEdit() {
            this.$refs.form.validate(valid => {
                if(valid) {
                    addCases(this.form).then(res=>{
                        if(res.code==200) {
                            this.$message.success("添加成功")
                            this.addVisible = false;
                            this.getData();
                        }else {
                            this.$message.error("添加失败")
                            }
                        })
                }else{
                    this.$message.error('请输入正确的信息')
                    return false;
                }
            })
        },
        addCase() {
            this.addVisible = true
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
            console.log("年月",this.query);
        },
        getData() {
            selectCaseByConditon(this.query).then(res=>{
                console.log("已结案的",res);
                if(res.code==200) {
                    this.tableData = res.data
                }else{
                    this.$message.error("数据加载失败")
                }

            })
            getCaseWhereStatus1().then(res=>{
                console.log(res);
                if(res.code == 200) {
                    this.leftItem1 = res.data
                }
                else {
                    this.$message.error(res.msg);
                }
            })
            getCaseWhereStatus2().then(res=>{
                console.log(res);
                if(res.code == 200) {
                    this.leftItem2 = res.data
                }
                else {
                    this.$message.error(res.msg);
                }
            })
            getLawyers().then(res=>{
                console.log("lawyerNames",res);
                if(res.code == 200) {
                    this.lawyerNames = res.data
                }
                else {
                    this.$message.error(res.msg);
                }
            })
        },
        queryByName(item){
            console.log(item);
            selectCaseByConditon(item).then(res=>{
                console.log(res);
                if(res.code==200) {
                    this.tableData = res.data
                }

            })
        }
    }
};
</script>

<style scoped>

.handle-select {
    width: 120px;
}

.handle-input {
    width: 200px;
    display: inline-block;
}
.el-header {
    background-color: rgba(205, 205, 205, 0.66);
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
}
/deep/.el-card__body, .el-main {
    padding: 0px;
}
</style>